<template>
  <div class="home-banner">
    <swiper
      class="swiper-container"
      :loop="true"
      :autoplay="true"
      :options="options"
      @slideChange="onSlideChange"
      v-if="list.length"
    >
      <swiper-slide v-for="(it, i) in list" :key="i" class="swiper-slide">
        <my-image height="100%" :src="it.src"> </my-image>
      </swiper-slide>
      <div class="dot-wrap flex">
        <div
          class="dot"
          v-for="(it, i) in list"
          :class="{ active: i == current }"
          :key="it.id"
        ></div>
      </div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "/src/common/swiper.js";
import "swiper/swiper.less";
import { ref } from "@vue/reactivity";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const current = ref(0);
    const onSlideChange = (swiper) => {
      current.value = swiper.realIndex;
    };
    return {
      current,
      onSlideChange,
      options: {
        autoplay: {
          delay: 1000,
        },
      },
    };
  },
};
</script>

<style lang="less" scoped>
.home-banner {
  padding-bottom: 39%;
  position: relative;
}
.swiper-container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.swiper-slide {
  position: relative;
  width: 100%;
}
.img-container {
  width: 100%;
  overflow: hidden;
}
.my-image {
  height: 100%;
}
.dot-wrap {
  position: absolute;
  right: 6.4%;
  bottom: 6.7%;
  z-index: 10;
  .dot {
    width: 8px;
    height: 6px;
    background: #fff;
    border-radius: 3px;
    opacity: 0.49;
    margin-right: 6px;
    &.active {
      transition: opacity 0.5s, width 0.3s;
      width: 12px;
      opacity: 1;
    }
  }
}
</style>